<template>
  <template v-for="item in menuList" :key="item.path">
    <!--  单一菜单  -->
    <el-menu-item
      v-if="item.children && item.children.length === 1 && !item.meta?.hidden"
      :index="item.path + '/' + item.children[0].path"
    >
      <el-icon v-if="item.children[0].meta?.icon">
        <component :is="item.children[0].meta.icon" />
      </el-icon>
      <span>{{ item.children[0].meta?.title || item.children[0].name }}</span>
    </el-menu-item>
    <!--  嵌套菜单 -->
    <el-sub-menu
      v-else-if="item.children && item.children.length > 1 && !item.meta?.hidden"
      :index="item.path"
    >
      <template #title>
        <el-icon v-if="item.meta?.icon">
          <component :is="item.meta?.icon" />
        </el-icon>
        <span>{{ item.meta?.title || item.name }}</span>
      </template>
      <side-menu :menuList="item.children" />
    </el-sub-menu>
    <!--  单一菜单 -->
    <template v-if="!item.meta?.hidden && !item.children?.length">
      <el-menu-item :index="item.path">
        <el-icon v-if="item.meta?.icon">
          <component :is="item.meta.icon" />
        </el-icon>
        <span>{{ item.meta?.title || item.name }}</span>
      </el-menu-item>
    </template>
  </template>
  <!-- </el-menu> -->
</template>

<script setup lang="ts">
  defineOptions({
    name: 'side-menu'
  })
  interface MenuItem {
    path: string
    name?: string
    children?: MenuItem[]
    meta?: {
      hidden?: boolean
      icon?: string
      title?: string
    }
  }

  defineProps({
    menuList: {
      type: Array as PropType<MenuItem[]>,
      default: () => []
    }
  })
</script>

<style scoped lang="scss">
  .sidebar-menu {
    height: 100%;
  }

  .sidebar-menu:not(.el-menu--collapse) {
    width: 200px;
  }
</style>
